<!--
 * @Author: wjc
 * @Date: 2025-09-15 15:17:21
 * @LastEditors: wjc
 * @LastEditTime: 2025-09-22 16:02:17
 * @Description: 
-->
<template>
  <div
    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
    @click.stop="onCollapsed"
  >
    <Icon icon="lucide:chevrons-right" v-if="collapsed" class="size-4" />
    <Icon icon="lucide:chevrons-left" v-else class="size-4" />
  </div>
</template>

<script setup lang="ts">
  import { Icon } from '@iconify/vue'

  defineOptions({
    name: 'LayoutSidebarCollapse',
  })

  const collapsed = defineModel<boolean>('collapsed')

  const onCollapsed = () => {
    collapsed.value = !collapsed.value
  }
</script>
